import 	{sleep}  from '../../../function/test.js'

let timers;// 定时器（close_ani_FullControl任务）
// 操作过渡动画
export default {
	data(){
		return {
			// transition 过段动画样式
			// transition 动画显示
			show: false,
			modeClass: ['fade','slide-right'],// 过渡动画类型
			getSysInfoTime: 0,// 当前系统时间
			getSysInfoBattery: 0,// 当前手机电量

			
		}
	},
	async mounted(){
		/* 手动设置动画配置，需要在页面渲染完毕后调用 */
		//this.get_ani_init()
	},
	watch:{
		async Template(val){
			uni.showToast({
				mask:true,
				title:'切换中'
			})
			if (this.show==true){
				// 切换模板时，show=true
				// 则先隐藏控制面板
				this.isShowCommFullScreen()
			}
			setTimeout(()=>{
				// 显示控制面板
				this.isShowCommFullScreen()
				// 延时最多500，不然有时候有bug
			},500)
		},
		show: {
			handler(newValue, oldValue) {
				//console.log('show，show，show，show')
				//console.log(newValue)
				if (newValue==true){
					// 获取系统时间
					this.getDate().then(res=>{
						// 时:分
						this.getSysInfoTime = res.hours + ":" + res.minutes
					})
					
					// #ifdef APP-PLUS
					// 获取手机电量
					this.getBattery().then(res=>{
						this.getSysInfoBattery = res
						//console.log('当前手机电量')
						//console.log(res)
					})
					// #endif
					

					if (this.isFullScreenChange==false){
						// 获取退出全屏时的播放器进度条宽度
						this.getExtFullSliderWidth()
					}
					
					// 重新刷新onReady时显示的img等面板上的图片
					//this.get_Refresh_onReady_imgView()

					/* 2021-0117 新增代码 */
					// 执行如果ui控制面板显示时，n秒内用户没有操作，就隐藏ui控制面板
					this.close_ani_FullControl()
					
				}else {
					// 先隐藏[退出全屏]时的播放器进度条
					this.extFull_VideoSilder_isShow = false

					// 如果没有定时器任务就返回
					if (!timers) return
					// 销毁定时器（close_ani_FullControl任务）
					clearTimeout(timers) 
				}
			},
			immediate: true,//普通监听（可监听到第一次绑定的变化）
			deep: true//深度监听（可监听对象内属性变化）
		},
		// 监听是否进入或退出全屏 已迁移
		isFullScreenChange:{
			handler(newChange,oldChange){
				// 如果没有定时器任务就返回
				//if (!timers) return

				/* 2022-0118 新增优化
				 * 比如用户再全屏状态下点击屏幕让UI控制面板显示，然后过了假设4秒后他点击退出全屏
				 * 然后退出全屏时大概会延时400-1000毫秒才完全竖屏，然后他很快就会看到UI控制面板消失。
				 * 还有一种情况，刚好卡到消失的时间退出的，就会看到闪了一下一样，其实并不是。
				 */
				
				// 销毁定时器 
				//clearTimeout(timers) 
			},
			immediate: true
		},
		changingSliderX:{
			handler(newChangingSliderX,oldChangingSliderX){
				// 进度条拖动动作结束 并且 show=true 时
				if (newChangingSliderX == false && this.show == true){
					/* 2021-0117 新增代码 */
					// 执行如果ui控制面板显示时，n秒内用户没有操作，就隐藏ui控制面板
					this.close_ani_FullControl()
				}
			}
		},
		isXiaoChuang: {
			handler(newXiaoChuang,oldXiaoChuang){
				// 这里必须在小窗属性发生变化时重新计算，因为show=true属性去算的话，慢与小窗发生变化，所以会在第一次改变小窗状态时，播放器进度条没有实时去计算，当再次点击打开控制面板时候，才计算的是正常的，这是不对的，要的必须是实时计算
				// 获取退出全屏时的播放器进度条宽度
				//this.getExtFullSliderWidth()
			},
			immediate: false,//不需要监听第一次，不然早于view视图渲染，会找不到id,无法执行上面的事件，会爆个错
		}
		//
	},
	methods:{
		// 手动初始化配置	(必须！如果不手动初始化，会有bug)
		get_ani_init(){
			this.$refs.ani_FullControl_top.init({
			    duration: 200,//动画持续时间，单位ms
			    timingFunction:'ease-in',//定义动画的效果
			    delay:0,//动画延迟时间，单位 ms
			})
			this.$refs.ani_FullControl_bottom.init({
			    duration: 200,//动画持续时间，单位ms
			    timingFunction:'ease-in',//定义动画的效果
			    delay:0,//动画延迟时间，单位 ms
			})
			// 抽屉面板动画初始化(由于没进入全屏时，抽屉是没有显示的，所以不能初始化)
			// this.$refs.ani.init({
			//     duration: 1000,
			//     timingFunction:'ease-in',
			//     delay:500,
			//     //transformOrigin:'left center'
			// })
		},
		// 控制面板 - 过渡动画 - [队列>>top+bottom]
		getInit_ani_FullControl(){
			this.getShow_ani_FullControl_top()
			this.getShow_ani_FullControl_bottom()
		},
		// 控制面板 - 过渡动画 - [top顶部控制菜单]
		getShow_ani_FullControl_top(){
			// 上上平移到 -350px,旋转 0 读
			this.$refs.ani_FullControl_top.step({
				//translateY: '-350px',
				rotate: '0'
			})
			// 上面的动画执行完成后，等待200毫秒平移到 0px,旋转到 0 读
			this.$refs.ani_FullControl_top.step({
				//translateY: '0px',
				rotate: '0'
			},
			{
				timingFunction: 'ease-in',
				duration: 300
			})
			// 开始执行动画
			this.$refs.ani_FullControl_top.run(()=>{
				//console.log('动画支持完毕')
			})
		},
		// 控制面板 - 过渡动画 - [bottom底部控制菜单]
		getShow_ani_FullControl_bottom(){
			// 向下平移到 350px,旋转 0 读
			this.$refs.ani_FullControl_bottom.step({
				//translateY: '350px',
				rotate: '0'
			})
			// 上面的动画执行完成后，等待200毫秒平移到 0px,旋转到 0 读
			this.$refs.ani_FullControl_bottom.step({
				//translateY: '0px',
				rotate: '0'
			},
			{
				timingFunction: 'ease-in',
				duration: 300
			})
			// 开始执行动画
			this.$refs.ani_FullControl_bottom.run(()=>{
				//console.log('动画支持完毕')
			})
		},
		
		
		// 视频开始播放时执行一次，让控制面板动画显示出来
		async getShow_ani_FullControl(){
			await setTimeout(()=>{
				//@ 提示，下面两步很重要，如果顺序发生变化，会有bug，造成动画执行后立马关闭(隐藏组件show=false)
				// 第一步：必须先让动画进入队列
				this.getInit_ani_FullControl()
				// 第二步：动画进入队列后，才能执行show=true
				this.isShowCommFullScreen()
				// 这里也就不需要设置false,因为显示后，用户会手动点击，然后隐藏
			},500)
			
		},


		/* 2021-0117 新增代码 */
		// 如果ui控制面板显示时，n秒内用户没有操作，就隐藏ui控制面板
		async close_ani_FullControl(){
			
			// 获取开发者自定义的时间，不配置则是内置的默认时间
			let close_time = this.Config.close_ani_FullControl_time
			
			// 3.5.1.2 新增基于上个版本的n秒后无操作隐藏ui控制面板的不足问题，已支持不自动隐藏，将时间设置0即可不自动隐藏，必须手动切换显示和显示
			// 如果设置时间为0，则直接返回。
			if (close_time == 0) return false

			// 延时n秒后，如果没有关闭，就执行关闭
			timers = await setTimeout(() => {
				
				/* 如果ui控制面板 show=true 并且slider进度条拖动状态=false 并且抽屉面板item项=false 才可以关闭。
				 * 否则，当show=true时，slider进度条也是拖动状态下，就关闭了ui控制面板会造成无法继续拖动的问题
				 */
				
				if (this.show == true && this.changingSliderX == false && this.isopenDrawerItem == false){
					// 弹幕编辑view是关闭是才可以关闭
					if (this.isDanMuInput_View == false) {
						// 关闭ui控制面板
						this.isShowCommFullScreen()
						// 销毁定时器
						clearTimeout(timers) 
					}
				}
			}, close_time);
		}
	}
}